<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group :title="title">
        <van-swipe-cell v-for="item in users" :key="item.id">
          <van-cell
            :key="item.id"
            :title="item.name || item.nickname"
            :label="item.telephone"
          >
            <template>
              <van-tag type="danger" v-if="item.staff == 0">{{
                item.staff_name
              }}</van-tag>
              <van-tag type="success" v-else>{{ item.staff_name }}</van-tag>
            </template>
          </van-cell>
          <template #right>
            <van-button
              class="swipe-cell-button"
              square
              type="danger"
              text="取消"
              @click="onCancel(item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { getStaffUsers, updateStaffUser } from "@/api/wechat";

export default {
  name: "StaffUser",
  components: {},
  props: {},
  data() {
    return {
      title: this.$route.meta.title,
      loading: false,
      finished: false,
      users: [],
      listQuery: {
        page: 1,
        page_size: 10,
        staff: 1,
      },
    };
  },
  computed: {},
  methods: {
    onLoad() {
      this.getStaffList();
    },
    getStaffList() {
      this.loading = true;
      getStaffUsers(this.listQuery).then((res) => {
        if (res.data.results.length === 0) {
          this.users = []; // 清空数组
          this.finished = true; // 停止加载
        }
        this.listQuery.page = res.data.page;
        this.users.push(...res.data.results);
        this.loading = false;

        if (this.users.length >= res.data.count) {
          this.finished = true; // 结束加载状态
        }
      });
    },

    onCancel(user_id) {
      const data = {
        id: user_id,
        staff: 0,
      };
      updateStaffUser(data)
        .then((res) => {
          console.log(res.data);
          const data = res.data;
          const index = this.users.findIndex((v) => v.id == data.id);
          this.users.splice(index, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },

  mounted() {},
};
</script>

<style  scoped>
</style>